<template>
<div id="wrap">
	<!-- aside -->
	<div class="q-aside" ref="aside">
		<div class="logo" ref="logo">
			<h1><i class="el-icon-eleme"></i>后台系统</h1>
		</div>
		<transition name="el-fade-in-linear">
			<el-menu default-active="0" model="vertical" :unique-opened="true" :collapse="isCollapse" class="menu">
				<nav-menu :menus="menus"></nav-menu>
			</el-menu>
		</transition>
	</div>
	<div class="q-container" ref="container">
		<!-- header -->
		<div class="q-header" ref="q-header">
			<el-row class="top">
				<el-col :span="18" class="navs">
					<i :class="[isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold']" @click="switchCollapse"></i>
				</el-col>
				<el-col :span="6" class="infs">
					<el-dropdown @command="commitEvt">
						<span class="el-dropdown-link">
							<img :src='userInfo.avatars' :key="k" class="" />{{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<template slot="dropdown">
							<el-dropdown-menu>
								<el-dropdown-item command="uc">个人中心</el-dropdown-item>
								<el-dropdown-item command="logout">登出</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</el-col>
			</el-row>
		</div>
		<!-- main -->
		<div class="q-main">
			<router-view></router-view>
		</div>
	</div>
	<div class="shade" ref="shade"></div>
</div>
</template>

<script>
import { userLogout } from '@/api/user_api';

export default {
  name: 'Index',
	data() {
		return {
			isCollapse: false,
			userInfo: {},
			k: 0,
			home: {}, // 首页
			menus: [],  // 菜单
			comName: 'Label',
			html: '',
			comps: [],  // 组件列表
			conf: {
				w: 180,  // 全局aside宽度
				lw: 180,  // 全局main宽度
				tw: -180
			},  // 全局配置
			tmpSup: {}
		}
	},
	watch: {
		'$store.state.uinfo'(val) {
			if(this.k == 1) {  // 特殊处理（由于头像的名称相同，导致数据不会重新渲染），通过k值来告诉vue组件的变化
				this.k = 0;
			}else {
				this.k = 1;
			}
		}
	},
	created() {
		const uinfo = this.$store.state.uinfo;
		this.userInfo = uinfo;
		this.menus = this.$store.state.routes;
		this.menus.unshift({path: '/', name: 'home', meta: {id: 0, index: 0, title: '首页', icon: 'el-icon-s-home', type: 1, show: 1}});
	},
	mounted() {
		this.resize();
	},
	methods: {
		// 整合菜单选择列表
    polyMenus(menu, data, me) {
			data.map((it, i) => {
				if(menu.indexOf(it.meta.id) >= 0) {
					const tmp = {path: it.path, name: it.name, component: it.component, meta: it.meta};
					me.push(tmp);
					if(it.children) {
						tmp.children = [];
						polyMenus(it.children, tmp.children);
					}
				}else {
					if(it.children && it.children.length > 0) {
						const	tmpSup = {path: it.path, name: it.name, component: it.component, meta: it.meta, children: []};
						it.children.map((jtem, jx) => {
							if(menu.indexOf(jtem.meta.id) >= 0) {
								const tmpSub = {path: jtem.path, name: jtem.name, component: jtem.component, meta: jtem.meta};
								tmpSup.children.push(tmpSub) ;
								if(jtem.children) {
									tmpSub.children = [];
									polyMenus(jtem.children, tmpSub.children);
								}
							}
						})
						if(tmpSup.children.length > 0) {
							me.push(tmpSup);
						}
					}
				}
			})
    },
		// 切换菜单
		switchMenu: function(com) {
			this.$router.push(com);
    },
		hasChild(data) {
      const res = [];
      data.map(it => {
        if(it.children && it.children.length > 0) {
          res.push(it);
        }
      })
      return res;
    },
    noHasChild(data) {
      const res = [];
      data.map(it => {
        if(!it.children) {
          res.push(it);
        }
      })
      return res;
    },
		/**
		 * @des Logout
		 */
		commitEvt(command) {
			if(command === 'logout') {
				userLogout().then(response => {
					const res = response.data;
					if(res.s) {
						this.$router.push({path: '/login'})
					}
				})
			}else if(command == 'uc') {
				this.$router.push({
					path: '/user/ucenter'
				})
			}
		},
		resize() {
			let sWidth = document.body.clientWidth,
				me = this;
			const aside = this.$refs['aside'],
				logo = this.$refs['logo'],
				container = this.$refs['container'],
				header = this.$refs['q-header'];
			const where = function(sWidth) {
				if(sWidth < 768) {
					aside.style.transform = 'translate3d(-180px, 0, 0)';
					container.style.left = header.style.left = 0;
				}else if(sWidth >= 768 && sWidth < 992) {
					aside.style.width = logo.style.width = '64px';
					aside.style.transform = 'translate3d(0, 0, 0)';
					container.style.left = header.style.left = '64px';
					me.isCollapse = true;
				}else {
					aside.style.width = logo.style.width = '180px';
					aside.style.transform = 'translate3d(0, 0, 0)';
					container.style.left = header.style.left = '180px';
					header.style.right = 0;
					me.isCollapse = false;
				}
			};
			where(sWidth);
			window.onresize = () => {
				sWidth = document.body.clientWidth;

				where(sWidth);
			}
		},
		// 切换菜单
		switchCollapse() {
			let sWidth = document.body.clientWidth;
			const aside = this.$refs['aside'],
				header = this.$refs['q-header'],
				logo = this.$refs['logo'],
				container = this.$refs['container'],
				shade = this.$refs['shade'];
				
				if(sWidth < 768) {
					shade.style.display = 'block';
					aside.style.transform = 'translate3d(0,0,0)';
					if(this.isCollapse) {
						aside.style.width = logo.style.width = '180px';
						header.style.left = '180px';
						this.isCollapse = false;
						shade.addEventListener('click', () => {
							shade.style.display = 'none';
							aside.style.width = logo.style.width = '64px';
							this.isCollapse = true;
							aside.style.transform = header.style.transform = 'translate3d(-64px,0,0)';
						});
					}else {
						header.style.left = '180px';
						shade.addEventListener('click', () => {
							shade.style.display = 'none';
							aside.style.transform = 'translate3d(-180px,0,0)';
							header.style.left = 0;
						});
					}
				}else if(sWidth >= 768 && sWidth < 992) {
					shade.style.display = 'block';
					aside.style.transform = 'translate3d(0,0,0)';
					if(this.isCollapse) {
						aside.style.width = logo.style.width = header.style.left = '180px';
						this.isCollapse = false;
						shade.addEventListener('click', () => {
							shade.style.display = 'none';
							aside.style.width = logo.style.width = '64px';
							aside.style.transform = 'translate3d(0,0,0)';
							this.isCollapse = true;
						});
					}else {
						aside.style.width = logo.style.width = header.style.left = '64px';
						this.isCollapse = true;
					}
				}else {
					aside.style.transform = 'translate3d(0,0,0)';
					if(this.isCollapse) {
						aside.style.width = logo.style.width = '180px';
						container.style.left = header.style.left = '180px';
						this.isCollapse = false;
						shade.addEventListener('click', () => {
							shade.style.display = 'none';
							aside.style.width = logo.style.width = '64px';
							aside.style.transform = 'translate3d(0,0,0)';
							this.isCollapse = true;
						});
					}else {
						aside.style.width = logo.style.width = '64px';
						container.style.left = header.style.left = '64px';
						this.isCollapse = true;
						shade.addEventListener('click', () => {
							shade.style.display = 'none';
							aside.style.width = logo.style.width = '180px';
							aside.style.transform = 'translate3d(0,0,0)';
							this.isCollapse = false;
						});
					}
					
				}
		}
	}
}
</script>

<style lang="less">
	@base_bg: #f3f7f8;
	@bg: #545c64;
	@tomato: tomato;
	@darkblue: #253c51;
	@black: #333;
	@white: #fff;
	@gray: #e9e9e9;
	@success: #67C23A;
	@warning: #E6A23C;
	@danger: #F56C6C;
	
	#cont {
		padding: 15px;
	}
	// aside
	.q-aside {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 180px;
		background-color: @darkblue;
		font-size: 14px;
		z-index: 999;
		.logo {
			float: left;
			width: 180px;
			height: 46px;
			padding: 0 20px;
			box-shadow: 0 1px 3px @tomato;
			background-color: @tomato;
			overflow: hidden;
			h1 {
				font-size: 18px;
				color: @white;
				line-height: 46px;
				text-align: center;
			}
		}
		.menu {
			margin-top: 46px;
		}
		.el-submenu .el-menu-item {
			// padding: 0 15px 0 30px!important;
			min-width: auto;
		}
		.el-submenu__title {
			height: 46px;
			line-height: 46px;
			text-align: left;
			vertical-align: middle;
			color: @gray;
			i {
				color: @gray;
			}
		}
		
	}
	.el-menu--popup {
		min-width: 180px;
	}
	.el-submenu__icon-arrow {
		margin-top: -3px;
	}
	.el-menu-item {
			height: 46px;
			border-left: 2px solid @darkblue;
			line-height: 46px;
			text-align: left;
			vertical-align: middle;
			i {
				text-align: left;
				color: @gray;
			}
		}
		.el-submenu__title {
			height: 46px;
			line-height: 46px;
			text-align: left;
			border-left: 2px solid @darkblue;
			color: @gray;
			i {
				color: @white;
			}
		}
		.el-submenu__title:hover,
		.el-submenu__title:focus,
		.el-menu-item:hover,
		.el-menu-item:focus {
			color: @black;
			background-color: @base_bg;
			border-left: 2px solid @tomato;
			i {
				color: @black;
			}
		}
		.el-menu-item.is-active {
			color: @black;
			background-color: @base_bg;
			border-left: 2px solid @tomato;
			i {
				color: @black;
			}
		}
		.el-menu--vertical .el-menu-item {
			height: 35px;
			line-height: 35px;
		}
	.q-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 180px;
		right: 0;
		// transition: margin-left .28s;
	}
	.q-header {
		position: fixed;
		right: 0;
		width: auto;
		height: 46px!important;
		padding: 0;
		box-shadow: 0 1px 3px @gray;
		background-color: @white;
		z-index: 999;
		.top {
			float: left;
			width: 100%;
			.navs {
				padding: 0 15px 0 5px;
				.el-icon-s-fold,
				.el-icon-s-unfold {
					font-size: 24px;
					line-height: 46px;
					cursor: pointer;
				}
			}
			.infs {
				padding-right: 15px;
				.el-dropdown {
					float: right;
				}
				.el-dropdown-link {
					line-height: 46px;
					color: @black;
					cursor: pointer;
					img {
						width: 30px;
						height: 30px;
						margin-right: 10px;
						border-radius: 100%;
					}
				}
			}
		}
	}
	.q-main {
		padding: 60px 15px 15px;
		overflow-y: auto;
	}
	.el-menu {
		border: 0;
		background-color: @darkblue;
	}
	.el-menu-item {
		color: @gray;
	}
	.el-submenu .el-menu-item {
		height: 35px;
		line-height: 35px;
	}
	@media screen and (max-width: 767px) {
		
	}
	@media screen and (min-width: 768px) {
		
	}
	@media screen and (min-width: 992px) {
		
	}
	.shade {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		z-index: 199;
	}
	.el-table {
		th {
			padding: 6px 0;
			background-color: @base_bg;
			font-size: 13px;
			color: #666;
		}
		td {
			padding: 5px 0;
			font-size: 12px;
		}
		.tr:hover {
			background-color: red;
		}
	}
	.el-form {
		.el-form-item {
			margin-bottom: 10px;
		}
	}
	/**
	** 查询
	*/
	.query {
		margin-bottom: 15px;
		.el-form-item {
			label {
				font-size: 13px;
				font-weight: 550;
			}
		}

	}
	/**
	*@common
	*/
	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		background-color: #f3f7f8;
	}
	::-webkit-scrollbar-thumb {
		// height: 6px;
		border-radius: 18px;
		background-color: #d4dad7;
	}
	input[type="number"] {
		padding: 0 0 0 15px;
	}
	.f-success {
		color: @success;
	}
	.f-danger {
		color: @danger;
	}
</style>
